<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #banner{
            position: relative;
            margin: 0 auto;
        }
       
        #banner,#banner li,#banner img {
            width:790px;
            height: 340px;
        }
        #banner ul li{
            position:absolute;
            list-style: none;
            display: none;
        }
        #banner ol li{
            width:15px;
            height: 15px;
            border-radius: 50%;
            float:left;
            margin-left:10px;
            border:1px solid #000;
            background: #fff;
            cursor: pointer;
        }
        #banner ol {
            position: absolute;
            bottom:20px;
            left:40%;
            z-index: 22;
            list-style: none;

        }
        #banner .tip{
            position: absolute;
            width:30px;
            height: 60px;
            /*border-radius: 50%;*/
            background: rgba(255,255,255,0.5);
            font-size:30px;
            color:#000;
            text-align: center;
            line-height: 50px;
            top:43%;
            z-index: 10;
            display: none;
        }
        #prev{
            left:0;
        }
        #next{
            right:0;
        }
        #banner div:hover{
            background: rgba(112, 240, 255, 0.3);
            color:#fff;
            cursor: pointer;
            display: block;
            background: #000000;
        }
        .dian{
        	background: red;
        	width: 228px;
        	border-radius: 10px;
        	background: rgba(255,255,255,0.5);
        }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div id="banner">
        <ul>
            <li style="left:0;display: block"><img src="img/01.jpg" alt=""></li>
            <li><img src="img/02.jpg" alt=""></li>
            <li><img src="img/03.jpg" alt=""></li>
            <li><img src="img/04.jpg" alt=""></li>
            <li><img src="img/05.jpg" alt=""></li>
            <li><img src="img/06.jpg" alt=""></li>
            <li><img src="img/07.jpg" alt=""></li>
            <li><img src="img/08.jpg" alt=""></li>
            <li><img src="img/01.jpg" alt=""></li>
        </ul>
        <ol class="dian">
            <li style="background: red"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <div id="prev"class="tip">&lt;</div>
        <div id="next"class="tip">&gt;</div>
    </div>
    <script>
        $(function(){
            $("#banner").mouseover(function(){
                clearInterval(timer);
            });
            $("#banner").mouseout(function(){
                timer = setInterval(move,2000);
            });
            var i = 0;
            timer = setInterval(move,2000);
            function move(){
                i++;
                $("#banner ul li").eq(i).fadeIn(1000);
                $("#banner ul li").eq(i).siblings().fadeOut(1000);
                $("#banner ol li").css("background","#fff");
                $("#banner ol li").eq(i).css("background","red");
                if(i==8){
                    i=0;
                    $("#banner ol li").eq(0).css("background","red");
                }
            }
            $("#prev").click(function(){
                i--;
                if(i==-1){
                    i=7;
                }
                $("#banner ul li").eq(i).siblings().fadeOut(1000);
                $("#banner ul li").css("display","none");
                $("#banner ul li").eq(i).fadeIn(500);
                $("#banner ol li").css("background","#fff");
                $("#banner ol li").eq(i).css("background","red");
            });
            $("#next").click(function(){
                i++;
                if(i==8){
                    i=0;
                }
                $("#banner ul li").eq(i).siblings().fadeOut(1000);
                $("#banner ul li").css("display","none");
                $("#banner ul li").eq(i).fadeIn(500);
                $("#banner ol li").css("background","#fff");
                $("#banner ol li").eq(i).css("background","red");
            });
            $("#banner ol li").click(function(){
                 i = $(this).index();
                $("#banner ul li").css("display","none");
                $("#banner ul li").eq(i).fadeIn(500);
                $("#banner ol li").css("background","#fff");
                $("#banner ol li").eq(i).css("background","red");
            })
            
            $("#banner").hover(function(){
            	$("#banner .tip").css("display","block")
            },function(){
            	$("#banner .tip").css("display","none")
            })
        })
    </script>

</body>
</html>